<template>
  <view class="qrcode-container">
    <view class="qrcode-wrapper" ref="qrCodeContainer"></view>
  </view>
</template>
<script lang="ts">
import Vue from 'vue';
const QRCode = require('qrcodejs2');

export default Vue.extend({
  onLoad(option: any) {
    if (option.id) {
      this.id = option.id;
    }
  },
  data() {
    return {
      id: ""
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadQrcodeImg();
    });
  },
  methods: {
    loadQrcodeImg() {
      console.log(this.$refs.qrCodeContainer);
      this.$mainApi.apiGetOrderQrcode(this.id).then((res) => {
        var qrcode = new QRCode((this.$refs.qrCodeContainer as any).$el, {
            text: res.data, // 需要转换为二维码的内容
            width: window.innerWidth / 2,
            height: window.innerWidth / 2,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
      })
    }
  }
})
</script>
<style scoped>
.qrcode-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qrcode-wrapper {
  width: 50vw;
  height: 50vw;
}
</style>